<template>
	<view class="my-qrcode">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">我的邀请码</block>
		</cu-custom>

		<view class="warp">
			<view class="top">
				<view class="label">
					您的邀请码
				</view>
				<view class="invite-code">
					{{invite_code}}
				</view>
				<view class="copy" @tap="copy">
					复制
				</view>
			</view>
			<view class="bottom">
				<image class="img" :src="qrcode" mode="aspectFit" @longtap="save"></image>
				<view class="tips">
					长按保存到相册分享给其他人扫一扫
				</view>
				<view class="tips">
					注册后即可成为您的好友
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {save} from '@/common/upload.js'
	import user from '@/api/user.js'
	export default {
		data() {
			return {
				invite_code: '',
				qrcode: '',
			}
		},
		onLoad() {
			this.getWeappQrcode();
		},
		methods: {
			async getWeappQrcode() {
				user.weappQrcode().then(res => {
					if (res.code === 1) {
						this.invite_code = res.data.invite_code;
						this.qrcode = res.data.qrcode;
					} else {
						this.toast(res.msg)
					}
				})
			},
			async save() {
				if (!this.qrcode) {
					this.toast('保存失败，暂无邀请码');
					return;
				}
				save(this.qrcode);
			},
			async copy() {
				if (!this.invite_code) {
					this.toast('复制失败，暂无邀请码');
					return;
				}
				uni.setClipboardData({
					data: this.invite_code
				}).then(res => {
					const [error, data] = res;
					if (!error) {
						this.toast('复制成功');
					} else {
						console.error(error);
					}
				});
			},
		}
	}
</script>

<style lang="less">
	page {
		height: 100%;
		overflow: hidden;
	}

	.my-qrcode {
		height: 100%;
		.warp {
			height: 100%;
			background-color: #FFE3BC;
			padding: 10px;
			.top {
				padding-bottom: 20px;
				text-align: center;
				border-bottom: 1px dashed #DDDDDD;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				background-color: #FFFFFF;

				.label {
					font-size: 15px;
					padding-top: 30px;
				}

				.invite-code {
					font-size: 24px;
					font-weight: bold;
					color: #FF9D12;
					margin: 15px 0;
				}

				.copy {
					margin: 0 auto;
					width: 80px;
					border: 1px solid #FF9D12;
					color: #FF9D12;
					padding: 2px 0;
					border-radius: 20px;
				}
			}

			.bottom {
				text-align: center;
				padding: 20px 0;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				background-color: #FFFFFF;

				.img {
					width: 100%;
					height: 1000rpx;
				}

				.tips {
					font-size: 12px;
					color: #AAAAAA;
					line-height: 20px;
				}
			}
		}
	}
</style>